<template>
  <view class="package space-between">
    <view v-for="(item, index) in list" :key="index" class="pross">
      <view class="column item">
        <image :src="item.icon"></image>
        <text :style="{ color: index < 2 ? '#1B91FF' : '' }">{{ item.name }}</text>
      </view>
      <view
        class="Dotted"
        :style="{ display: index == '2' ? 'none' : '', borderBlockColor: index < 2 ? '#1B91FF' : '' }"
      ></view>
    </view>
  </view>
</template>

<script setup lang="ts">
const list = [
  { icon: '../../static/saleIcon/Icon/icona.png', name: '地推员发送订单' },
  { icon: '../../static/saleIcon/Icon/iconb.png', name: '确认支付订单' },
  { icon: '../../static/saleIcon/Icon/iconc.png', name: '地勤人员加注' },
];
</script>

<style scoped lang="less">
  .pross {
    display: flex;
    align-items: center;
    .item {
      width: 180rpx;
      image {
        width: 60rpx;
        height: 60rpx;
      }
      text {
        font-size: 24rpx;
        font-family: PingFangSC;
        color: #666666;
        margin-top: 10rpx;
      }
    }
    .Dotted {
      width: 65rpx;
      border-top: 1px dashed #999;
      margin-bottom: 30rpx;
    }
  }
</style>
